import React, { useCallback, useMemo } from "react";
import { sizes } from "./const";
import { CardBlockProps, sizezType } from "./type";
import { ICardBlockPropsDefault } from "./mock";
import Image from "next/image";
import { globalImage } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import WishlistButtonMolecule from "../../Molecules/WishlistButton.molecule";
import Link from "next/link";

const CardBlock: React.FC<CardBlockProps> = (props) => {
  const { price, image, title, color, brand, id } = props;

  const renderSize = useCallback((sizes: sizezType[]) => {
    return sizes.map((size, index) => (
      <button
        key={index}
        className="border-2 border-solid border-borderColor focus:border-bg_active w-10 p-2"
      >
        <h5 className="text-h5 font-bold mx-auto text-neutral-500 uppercase cursor-pointer">
          {size.value}
        </h5>
      </button>
    ));
  }, []);

  const memoizedSizes = useMemo(() => renderSize(sizes), [renderSize]);

  return (
    <Link
      className="grid grid-cols-[minmax(0,auto)] grid-rows-[auto auto auto minmax(0,100%)] p-6 bg-bgGen shadow-3xl rounded-lg flex flex-col h-full text-textColor"
      href={`/product/${id}`}
      target="_blank"
    >
      <div className="overflow-hidden	">
        <div className="rounded-md w-full h-[280px] relative pb-4">
          <div className="absolute right-0 z-20">
            <WishlistButtonMolecule
              title={title}
              brand={brand}
              price={price}
              img_paths={image}
              colors={color}
              id={id}
            />
          </div>
          <Image
            className={globalImage}
            src={`/img/${image}.png`}
            width={1200}
            height={720}
            alt={title || "image"}
            priority={false}
          />
        </div>
      </div>
      <h3 className="text-h3 font-light text-tiffany mt-1 mb-2">{brand}</h3>
      <h4 className="text-h4 font-medium h-[50px] overflow-hidden">{title}</h4>
      <h4 className="text-h4 font-bold">{price?.toLocaleString()} ₽</h4>
      {/* <h5 className="text-h5 font-light text-tiffany">{color}</h5> */}
      {/* <div className="flex gap-2">{memoizedSizes}</div>
      <ButtonAtom type={ButtonAtomEnum.enum_butButton}>Купить</ButtonAtom> */}
    </Link>
  );
};

CardBlock.defaultProps = ICardBlockPropsDefault;
export default React.memo(CardBlock);
